<template>
  <div class="preview-card">
    <div class="card-content">
      <div class="top-banner">
        <div style="float: left">{{nowTime}}</div>
        <div style="float: right">
          <icon-svg iconClass="SDKxinhao"></icon-svg>
          <icon-svg iconClass="SDKWi-Fi"></icon-svg>
          <icon-svg iconClass="SDKdianchi"></icon-svg>
        </div>
      </div>
      <div class="title">
        <span class="title-name">{{propertyData.name}}</span>
        <div class="title-icon">
          <icon-svg iconClass="xiaochengxu-gengduo"></icon-svg>
          <div style="display:inline-block; width: 1px;height: 12px;background: #E6EAED;margin:0 6px"></div>
          <icon-svg iconClass="xiaochengxu-guanbi"></icon-svg>
        </div>
      </div>
      <div class="img">
        <img style="width:288px;height:96px" v-if="propertyData.bannerUrl" :src="propertyData.bannerUrl" alt="">
        <div v-else>Banner展示区域</div>
      </div>
      <div class="services">
        <icon-svg style="font-size: 14px" iconClass="fuwujindu"></icon-svg>
        <span class="services-name">服务进度</span>
      </div>
      <div style="display:flex;flex-wrap:wrap">
        <div class="services-card" v-for="item in propertyData.proposeTypeList" :key="item.modelId">
          <div class="card-icon">
            <icon-svg style="font-size: 20px" :iconClass="item.icon"></icon-svg>
          </div>
          <div class="text-ellipsis" style="text-align:center">{{item.proposeName}}</div>
        </div>
      </div>
      <div class="hotLine">
        {{propertyData.hotLine? propertyData.hotLine: '客服热线展示区域'}}
      </div>
      <div class="bottom-line"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'

@Component({
  name: 'PreviewCard'
})
export default class PreviewCard extends Vue {
  @Prop({ default: () => ({}) }) private propertyData: any
  private nowTime: string = `${new Date().getHours()}:${new Date().getMinutes()}`
  private proposeTypeList: any[] = []
}
</script>
<style lang="stylus" scoped>
  .preview-card
    position relative
    top 50%
    left calc(50% - 340px)
    transform translate(0, -50%)
    width 340px
    height 588px
    background #FFFFFF
    border 1px solid #E7E9ED
    box-shadow 0px 1px 8px 0px rgba(224, 230, 240, 0.7)
    border-radius 20px
    display inline-block
    .card-content
      position relative
      left 10px
      top 10px
      width 320px
      height 568px
      background #F9F9F9
      border-radius 20px
      padding 0 16px
      .top-banner
        height 36px
        line-height 36px
      .title
        position relative
        text-align center
        height 44px
        .title-name
          width 77px
          height 14px
          font-size 14px
          font-family PingFang SC
          font-weight 500
          color #000000
          line-height 44px
        .title-icon
          position absolute
          right 0
          top 50%
          transform translate(0, -50%)
          width 66px
          height 24px
          line-height 24px
          background #FFFFFF
          border 1px solid #E6EAED
          border-radius 12px
      .img
        width 288px
        height 96px
        line-height 96px
        border-radius 6px
        background #fff
        margin 0 auto
        text-align center
      .services
        width 288px
        height 34px
        line-height 34px
        text-align center
        background #FFFFFF
        border-radius 6px
        margin 16px auto
        .services-name
          width 48px
          font-size 12px
          font-family PingFang SC
          font-weight 400
          color #303753
          margin-left 5px
      .services-card
        width 64px
        height 64px
        background #FFFFFF
        border 1px solid #ECF0F3
        border-radius 6px
        margin 0 8px 8px 0
        .card-icon
          text-align center
          margin: 10px 0
      .hotLine
        position absolute
        bottom 36px
        width 288px
        text-align center
        font-size 12px
        font-family PingFang SC
        font-weight 400
        color #767E91
      .bottom-line
        width 120px
        height 4px
        background #000000
        border-radius 2px
        position absolute
        bottom 20px
        left 50%
        margin-left -60px
</style>
